import { createUseStyles } from 'react-jss';

export const useStyles = createUseStyles(() => ({
  iconListContainer: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    margin: '20px 0',
  },
  iconItem: {
    fontSize: 36,
    color: 'gray',
    boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
    borderRadius: 4,
    padding: 10,
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    '&:hover': {
      transform: 'scale(1.05)',
      boxShadow: '0 0 20px 0 rgba(0, 0, 0, 0.2)',
      backgroundColor: '#f0f0f0',
    },
  },
  searchInput: {
    width: 200,
    height: 32,
    borderRadius: 4,
    border: '1px solid #d9d9d9',
    padding: '0 10px',
    fontSize: 14,
  },
}));
